
<template>
  <BaseCharts :option="option"></BaseCharts>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import BaseCharts from '../../base/baseCharts.vue';
/** 数据 */
const data = [
  { name: "常规", value: 175.17, },
  { name: "紧急", value: 148.35, },
  { name: "疑难", value: 95.36, },
];

let xAxisData: string[] = [];
let seriesData: number[] = [];
let sum = 0;

const barTopColor = ["#02c3f1", "#53e568", "#a154e9"];
const barBottomColor = [
  "rgba(2,195,241,0.1)",
  "rgba(83, 229, 104, 0.1)",
  "rgba(161, 84, 233, 0.1)",
];

data.forEach((item) => {
  xAxisData.push(item.name);
  seriesData.push(item.value);
  sum += item.value;
});


const option = computed(() => {
  const data = {
    grid: {
      top: "25%",
      bottom: "15%",
    },
    xAxis: {
      data: xAxisData,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        margin: 25,
        align: "center",
        formatter: function (params: any, index: number) {
          return (`{a|${((seriesData[index] / sum) * 100).toFixed(2)}%}\n{b|${params}}`);
        },
        fontSize: 14,
        color: "#ffffff",
        rich: {
          a: {
            fontSize: 12,
            color: "#ffffff",
          },
          b: {
            height: 20,
            fontSize: 14,
            color: "#ffffff",
          },
        },
      },
      interval: 0,
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        name: "柱顶部",
        type: "pictorialBar",
        symbolSize: [26, 10],
        symbolOffset: [0, -5],
        z: 12,
        itemStyle: {
          color: function (params: any) {
            return barTopColor[params.dataIndex];
          },
        },
        label: {
          show: true,
          position: "top",
          fontSize: 16,
        },
        symbolPosition: "end",
        data: seriesData,
      },
      {
        name: "柱底部",
        type: "pictorialBar",
        symbolSize: [26, 10],
        symbolOffset: [0, 5],
        z: 12,
        itemStyle: {
          color: function (params: any) {
            return barTopColor[params.dataIndex];
          },
        },
        data: seriesData,
      },
      {
        name: "第一圈",
        type: "pictorialBar",
        symbolSize: [47, 16],
        symbolOffset: [0, 11],
        z: 11,
        itemStyle: {
          color: "transparent",
          borderColor: "#3ACDC5",
          borderWidth: 2,
        },
        data: seriesData,
      },
      {
        name: "第二圈",
        type: "pictorialBar",
        symbolSize: [62, 22],
        symbolOffset: [0, 17],
        z: 10,
        itemStyle: {
          color: "transparent",
          borderColor: barTopColor[0],
          borderWidth: 2,
        },
        data: seriesData,
      },
      {
        type: "bar",
        itemStyle: {
          color: function (params: any) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 1,
                color: barTopColor[params.dataIndex],
              },
              {
                offset: 0,
                color: barBottomColor[params.dataIndex],
              },
            ]);
          },
          opacity: 0.8,
        },
        z: 16,
        silent: true,
        barWidth: 26,
        barGap: "-100%",
        data: seriesData,
      },
    ],
  }

  return data
})
</script>

<style scoped lang="scss"></style>
